<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getHostShowList } from '@/api/shop'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const navList = ref(['主持演出', '舞台设备'])
	const query = ref({areaId: user.addressIds[2], type: 0, current: 1, size: 20, status: 1})
	const triggered = ref(false)
	const total = ref(0)
	const list = ref([])
	const totalPrice = ref(0)
	
	function handleNav(index) {
		if(index != query.value.type) {
			query.value.type = index
			triggered.value = true
		}
	}
	function goView(id) {
		let name = navList.value[query.value.type] + '详情'
		let url = `/pages/shop/hostShowDetail?id=${id}&title=${name}`
		uni.navigateTo({url})
	}
	function selectHost(item, value) {
		item.select = value
		computeTotal()
	}
	function computeTotal() {
		let total = list.value.reduce((total, item) => {
			if(item.select) total += item.price * 1000
			return total
		}, 0)
		totalPrice.value = total / 1000
	}
	function goBuy() {
		if(loading.value) return
		let goodsList = []
		list.value.forEach(item => {
			if(item.select) {
				goodsList.push({
					id: item.performanceId,
					name: item.performanceName,
					furl: item.images && item.images[0] && item.images[0].furl || '',
					price: item.price,
					number: 1,
					type: 'PRESIDE',
				})
			}
		})
		if(!goodsList.length) {
			let name = navList.value[query.value.type]
			uni.showToast({icon: 'none', title: '请选择' + name})
			return
		}
		loading.value = true
		let data = {
			total: totalPrice.value,
			list: goodsList
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm',
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		loading.value = false
	}
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		getHostShowList(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			data.forEach(item => {item.select = false})
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			computeTotal()
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList() {
		if(loadStatus.value == 'loadmore' && list.value.length < total.value){
			loadStatus.value = 'loading'
			query.value.current ++
			getHostShowList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				data.forEach(item => {item.select = false})
				total.value = Number(result.total)
				list.value.push(...data)
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	
	onLoad((option) => {
		triggered.value = true
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<view :class="['head-item', query.type == index? 'active' : '']" v-for="(nav, index) in navList" :key="nav" @click="handleNav(index)">{{nav}}</view>
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList">
			<view class="content-list" v-if="list.length">
				<view class="list-box" v-for="item in list" :key="item.performanceId" @click="goView(item.performanceId)">
					<view class="host-name uv-line-1">{{item.performanceName || '--'}}</view>
					<view class="host-info">描述：{{item.performanceDescription || '--'}}</view>
					<view class="host-buy" @click.stop>
						<view class="host-price">{{item.price? item.price.toFixed(2) : 0.00}}</view>
						<uv-button color="#FF3E49" shape="circle" size="small" text="选择" @click="selectHost(item, true)" v-if="!item.select" :disabled="loading">
						</uv-button>
						<uv-button color="#606060" shape="circle" size="small" text="取消选择" @click="selectHost(item, false)" v-else :disabled="loading"></uv-button>
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" isDot line></uv-load-more>
			</view>
			<view class="list-empty" v-else>
				<empty text="没有找到主持演出"></empty>
			</view>
		</scroll-view>
		<view class="app-bottom">
			<view class="bottom-total">总计：<text class="text-price">{{totalPrice? totalPrice.toFixed(2) : 0.00}}</text></view>
			<uv-button color="linear-gradient(102deg, #FA3F00 0%, #FF7445 100%)" :custom-style="{width: '200rpx'}" shape="circle" text="去下单" @click="goBuy"
				:disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		height: 100vh;
		.app-head{
			width: 100%;
			height: 132rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 24rpx;
			.head-item{
				flex: 1;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 8rpx;
				color: #525252;
				background-color: #FAF7F7;
				text-align: center;
				&.active{	
					font-weight: 600;
					color: #FD1024;
					background-color: #FFF4F2;
				}
			}
		}
		.app-content{
			width: 100%;
			height: calc(100% - 244rpx);
			.content-list{
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				.list-box{
					padding: 24rpx 32rpx;
					background-color: #FFFFFF;
				}
			}
			.host-name{
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				padding-bottom: 8rpx;
			}
			.host-info{
				margin-top: 16rpx;
				color: #6D6B6A;
			}
			.host-buy{
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				gap: 16rpx;
				.host-price{
					flex: 1;
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
					color: #FF0D0D;
					&::before{
						content: "¥";
						font-size: 60%;
					}
				}
			}
			.list-empty{
				margin: 24rpx;
				padding: 32rpx 0;
				background-color: #FFFFFF;
				border-radius: 12rpx;
			}
		}
		.app-bottom{
			height: 112rpx;
			border-top: 2rpx solid #D7DBE1;
			background: #ffffff;
			padding: 16rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 32rpx;
			font-weight: 600;
			.text-price{
				color: #FF0D0D;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				&::before{
					content: "¥";
					font-size: 60%;
				}
			}
		}
	}
</style>